<template>
  <div class="header">
    <div class="header_left">
      <span class="iconfont">&#xe624;</span>
    </div>
    <div class="header_search">
      <span class="iconfont">&#xe632;输入城市/景点/游玩主题</span>
    </div>
    <div class="header_right">
      <router-link to='/city'>
      {{city}}<span class="iconfont">&#xe6aa;</span>
      </router-link>
    </div>
  </div>
</template>
<script>
  import {mapState} from "vuex"
  export default{
    computed:{
      ...mapState(['city'])
    }
  }
</script>
<style scoped lang='stylus'>
@import '~css/var.styl'
.header {
  width: 100%;
  height: .88rem;
  line-height: .88rem;
  background: $bgColor;
  font-size: 0.36rem;
  display: flex;
  color: $textColor;
}
.header_search{
	flex: 1;
	background: #fff;
	height: .6rem;
	margin: .15rem 0;
	border-radius: .1rem;
	color: #e4e7ea;
	line-height: .6rem;
	font-size: 0.28rem;
	padding-left: .2rem;
}
.header_left{
	width: 0.2rem;
	padding: 0 0.2rem;
	text-align: center;
	font-weight: bold;
}
.header_right{
	padding: 0 .2rem;
	font-size: 0.32rem;
}
.header_right a{
  color:#fff;
}

</style>
